<template>
	<view>
		<view class="add-component-cell" @click="addClick">
			<view class="cell" :style="{height: (h + 'px')}">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"add-component-cell",
		props: {
			h: {
				type: Number,
				default: 35
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			addClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style scoped>
	
	.add-component-cell {
		background-color: #49495a;
		display: flex;
		border-radius: 5px;
	}
	
	.add-component-cell:hover {
		cursor: pointer;
		background-color: #444454;
	}
	
	.add-component-cell:active {
		background-color: #3c3c4a;
	}
	
	.cell {
		margin: 10px;
		width: calc(100% - 20px);
		display: flex;
	}

</style>